<template>
	<div>
		<el-row :gutter="gutter" class="row-container" type="flex">
			<el-col
				v-for="(item, index) in statisticsCardData"
				:key="index"
				:xs="cols[0] || 8"
				:sm="cols[1] || 8"
				:md="cols[2] || 8"
				:lg="cols[3] || 8"
				:xl="cols[4] || 8"
				:style="{ marginBottom: gutter + 'px' }"
			>
				<el-card>
					<div class="card-content">
						<div class="card-top">
							<div class="flexRBC">
								<div class="title">{{ item.title }}</div>
								<el-tooltip popper-class="el-tooltip-theme-fresh" placement="top" effect="light">
									<div slot="content">
										<div v-for="(desItem, desIndex) in item.describeList" :key="desIndex">{{ desItem }}</div>
									</div>
									<div v-if="item.describeList && item.describeList.length > 0"><i class="el-icon-warning app-text-color-primary" /></div>
								</el-tooltip>
							</div>
							<div class="count">{{ item.value }}</div>
							<div class="title">{{ item.supTitle }}</div>
						</div>
						<div v-if="item.detailList && item.detailList.length > 0" class="card-bottom">
							<div v-for="(subItem, subIndex) in item.detailList" :key="subIndex" class="cell-item">{{ subItem }}</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default {
	props: {
		cols: {
			type: Array,
			default: () => {
				return [12, 12, 8, 6, 4];
			}
		},
		gutter: {
			type: Number,
			default: 10
		},
		statisticsCardData: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {};
	},
	watch: {
		statisticsCardData() {
			console.log(this.statisticsCardData);
		}
	},
	methods: {}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.row-container {
	flex-wrap: wrap;

	::v-deep {
		.el-card {
			height: 100%;
		}
	}
}

.card {
	&-top {
		.title {
			font-size: 16px;
			color: $light-font-color;
		}

		.count {
			height: 50px;
			line-height: 50px;
			font-size: 26px;
			color: $dark-font-color;
			font-weight: bold;
		}
	}

	&-bottom {
		border-top: 1px solid #e7e7e7;

		.cell-item {
			margin-top: 10px;
			font-size: 14px;
			color: $light-font-color;
		}
	}
}
</style>
